<template>
  <view class="orderDetail">
    <view class="box">
      <detailItem
        title="订单商品"
        :isEdit="true"
        :list="goods"
        @edit="handleEdit"
      ></detailItem>
    </view>
    <detailFoot
      :bgColor="false"
      :list="btnList"
      @click="footBtnFn"
    ></detailFoot>
  </view>
  <EditOrder :options="options" ref="editRef" @submit="handleSubmit" />
  <u-modal
    :show="messageShow"
    confirmText="确认收货"
    confirmColor="#FD4D00"
    @confirm="goBack"
    @cancel="messageSubmit"
    :showCancelButton="true"
  >
    <template #default>
      <view class="messageBox">
        <view class="icon">
          <image class="img" src="@/static/gantanhao.png" mode=""></image>
        </view>
        <view class="message">
          单据内所有商品都会按照实发数量和实发单价进行收货，请确认！
        </view>
      </view>
    </template>
  </u-modal>
</template>

<!-- 收货单列表详情 -->
<script setup>
import { receiptOrderDetail } from "@/api/order";
import { onLoad } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { receiptOrderSave } from "@/api/order";
import detailItem from "@/components/orderDetail/detailItem.vue";
import detailFoot from "@/components/orderDetail/detailFoot.vue";
import EditOrder from "@/components/commodity/editOrder.vue";
import { BASE_UNIT } from "@/common/config";
const btnList = [
  {
    name: "保存",
    value: "pay",
  },
];
const options = computed(() => {
  return [
    {
      name: "收货单价",
      value: "affirePrice",
      type: "text",
      afterUnit: (btn) => {
        return `${BASE_UNIT.iconText}/${btn.unitName}`;
      },
    },
    {
      name: "收货数量",
      value: "affireNum",
      minVal: 0,
      type: "step",
      unit: "unitName",
    },
    { name: "备注", value: "remark", type: "input" },
  ];
});
const goods = computed(() => {
  try {
    return goodsList.value.map((btn) => {
      return {
        _data: btn,
        name: btn.goodsName,
        image: btn.goodsImage,
        des: btn.skuName,
        infoList: [
          {
            value: `${BASE_UNIT.icon}${btn.unitPrice}x${btn.preNum}${btn.unitName}`,
            tag: "order",
          },
          {
            name: "预订金额",
            value: `${BASE_UNIT.icon}${btn.preAmount}`,
          },
          {
            value: `${BASE_UNIT.icon}${btn.sendoutPrice}x${btn.sendoutNum}${btn.unitName}`,
            tag: "send",
          },
          {
            name: "实发金额：",
            value: `${BASE_UNIT.icon}${btn.sendoutAmount}`,
          },
          {
            value: `${BASE_UNIT.icon}${btn.affirePrice}x${btn.affireNum}${btn.unitName}`,
            tag: "accept",
          },
          {
            name: "收货金额：",
            value: `${BASE_UNIT.icon}${btn.affireAmount}`,
          },
          {
            name: "备注：",
            value: `${btn.remark || ""}`,
          },
        ],
      };
    });
  } catch (e) {
    return [];
  }
});
onLoad((params) => {
  if (params.id) {
    id.value = params.id;
    getDetail();
  }
});
const goodsList = computed(() => {
  return detail.value.respOmsOrderBillInfoDTOList;
});
const orderCode = computed(() => {
  return detail.value.respOmsOrderBillDTO.orderCode;
});
const id = ref();
const detail = ref({});
const getDetail = async () => {
  const res = await receiptOrderDetail({
    id: id.value,
  });
  detail.value = res;
};

const editRef = ref();
const handleEdit = (data) => {
  editRef.value?.open(data._data);
};
const handleSubmit = (data) => {
  const _id = data.productSkuId + data.unitId;
  for (let i = 0, len = goodsList.value.length; i < len; i++) {
    let item = goodsList.value[i];
    let id = item.productSkuId + item.unitId;
    if (id === _id) {
      detail.value.respOmsOrderBillInfoDTOList[i] = {
        ...item,
        affireNum: data.affireNum,
        affirePrice: data.affirePrice,
        remark: data.remark,
        affireAmount: (
          Number(data.affireNum) * Number(data.affirePrice)
        ).toFixed(2),
      };
    }
  }
  editRef.value?.close();
};
const footBtnFn = (name) => {
  if (name === "pay") {
    let _show = false;
    detail.value.respOmsOrderBillInfoDTOList.forEach((btn) => {
      if (!btn.affireNum) _show = true;
    });
    if (_show) {
      messageShow.value = true;
    } else {
      goBack();
    }
  }
};
const goBack = async () => {
  await receiptOrderSave({
    orderCode: orderCode.value,
    requestOmsOrderBillInfoList: goodsList.value,
  });
  uni.navigateBack();
};
const messageShow = ref(false);
const messageSubmit = () => {
  messageShow.value = false;
};
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
  padding-top: 13px;
}

.box {
  margin-bottom: 10px;
}

.messageBox {
  .icon {
    margin-bottom: 28px;
    display: flex;
    justify-content: center;

    .img {
      display: block;
      width: 35px;
      height: 35px;
    }
  }

  .message {
    color: #434343;
    font-size: 15px;
    line-height: 21px;
  }
}
</style>
